<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    empty-text
    :cell-style="{ padding: '2px 0', border: 'none' }"
    size="small"
    :header-cell-style="{ background: '#f4f6fa' }"
  >
    <el-table-column label="序号" type="index" :index="1" width="80">
    </el-table-column>
    <el-table-column label="点位名称" min-width="171">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="所在区域" min-width="169">
      <template slot-scope="scope">
        <span>{{ scope.row.region.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="商圈类型" min-width="169">
      <template slot-scope="scope">
        <span>{{ scope.row.businessType.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="合作商" min-width="169">
      <template slot-scope="scope">
        <span>{{ scope.row.ownerName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="详细地址" min-width="169" prop="addr" :formatter="formatAddr" show-overflow-tooltip>
    </el-table-column>

    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button type="text" @click="handlePreview(scope.$index, scope.row)"
          >查看详情</el-button
        >
        <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button type="text" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handlePreview (index, row) {
      this.$emit('handlePreview', index, row)
    },
    handleEdit (index, row) {
      this.$emit('handleEdit', index, row)
    },
    async handleDelete (index, row) {
      try {
        await this.$confirm('确定要删除吗？')
        this.$emit('handleDelete', index, row)
      } catch (e) {
        console.log(e)
      }
    },
    formatAddr (row, column, cellValue, index) {
      return cellValue.replace(/.*-/g, '')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
    // width: 100%;
    // padding: 0px 17px;

    font-size: 14px !important;
    // border: #606266 solid 2px;
    ::v-deep .el-table__header {
      height: 42px;
      .is-leaf.el-table__cell {
        border: none;
      }
    }
    ::v-deep .el-table__row {
      height: 44px;
    }
    ::v-deep .cell {
      color: rgb(102, 102, 102) !important;
      .el-button--text {
        color: #5f84ff;
      }
      .el-button--text:last-child {
        color: #ff5a5a;
      }
    }
    ::v-deep .el-table__body-wrapper.is-scrolling-left {
      overflow-x: hidden !important;
    }
  }
</style>
